<template>
  <div class="headbar" :class="{'draggable': !isFullScreen}">
    <div class="left" @click="clickLogoHandler">
      <img src="../../assets/images/public/logo.png">
      <div class="logo-label">
        <div class="title">{{versionInfo.title}}</div>
        <div class="version">{{versionInfo.versionName}} V{{(versionInfo.version || [0,0,1]).join('.')}}</div>
      </div>
    </div>
    <div class="middle">
      <div class="btns-list">
        <span class="btn-item" title="首页" @click="goHome">
          <i class="fa fa-home"></i>
        </span>
        <span class="btn-item" title="检测更新" @click="updateCheck">
          <i class="fa fa-arrow-circle-up"></i>
        </span>
        <span class="btn-item" title="关于" @click="about">
          <i class="fa fa-cog"></i>
        </span>
      </div>
    </div>
    <div class="right">
      <div class="btns-list">
        <span class="btn-item" :title="isFullScreen ? '还原' : '全屏'" @click="fullScreenHandler">
          <i class="fa" :class="isFullScreen ? 'fa-window-restore':'fa-window-maximize'"></i>
        </span>
        <span class="btn-item" title="最小化" @click="minimizeHandler">
          <i class="fa fa-minus"></i>
        </span>
        <span class="btn-item" title="关闭" @click="closeHandler">
          <i class="fa fa-times"></i>
        </span>
      </div>
    </div>
    <!-- 弹出框 -->
    <cmpMessageBox ref="cmpMessageBox" title="工具列表" width="50vw" height="28.87vw" padding="1.2vw 1.75vw 1.75vw">
      <div slot="body" class="msgbox-body-content">
        <cmpToolsList @close="closeToolsList"></cmpToolsList>
      </div>
    </cmpMessageBox>
    <cmpMessageBox ref="cmpMessageBox1" title="关于程序" width="50vw" height="28.87vw" padding="1.2vw 1.75vw 1.75vw">
      <div slot="body" class="msgbox-body-content1">
        <p>该工具箱目前还处于开发测试阶段，可能存在不少BUG，在使用中若发现任何错误或问题欢迎反馈；若有功能拓展方面的建议，且又在我能力范围内（同时与本程序定位相符），我会尽力实现。</p>
        <p>意见和建议可发送到邮箱<span class="btn btn-link" @click="copyMail">461399479@qq.com</span>，
          也可以在<span class="btn btn-link" @click="goBilibili">哔站视频</span>下方留言，未来程序若有迭代，
          也会在<span class="btn btn-link" @click="goBilibili">哔站视频</span>下方更新下载地址。</p>
      </div>
    </cmpMessageBox>
    <cmpMessageBox ref="cmpMessageBox2" title="版本更新" width="50vw" height="28.87vw" padding="1.2vw 1.75vw 1.75vw">
      <div slot="body" class="msgbox-body-content1">
        <p>最新版本：{{ onlineVersion.join('.') }}</p>
        <p>下载地址：<span class="btn btn-link" @click="goAlipan">阿里网盘</span></p>
        <p style="margin-bottom: .25em;">更新内容：</p>
        <div class="uc-item" v-for="(v,i) in updateContent" :key="i">{{ v }}</div>
      </div>
    </cmpMessageBox>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'
import cmpMessageBox from '@/components/cmp-message-box.vue'
import cmpToolsList from '@/components/cmp-tools-list.vue'
import versionInfo from '@/../public/version/index.js'
const {ipcRenderer, remote, shell} = global.require('electron')

export default {
  name: 'headbar',
  components: {
    cmpMessageBox,
    cmpToolsList
  },
  data() {
    return {
      winId: '',
      versionInfo,
    }
  },
  computed: {
    ...mapState({
      isFullScreen: 'isFullScreen',
      onlineVersion: (state) => state.version.onlineVersion,
      updateContent: (state) => state.version.updateContent,
    })
  },
  methods:{
    ...mapMutations({
      isFullScreenSetter: 'isFullScreenSetter'
    }),
    ...mapActions({
      checkVersion: 'version/checkVersion'
    }),
    // LOGO被点击
    clickLogoHandler () {
      this.$refs.cmpMessageBox && this.$refs.cmpMessageBox.show()
    },
    closeToolsList () {
      this.$refs.cmpMessageBox && this.$refs.cmpMessageBox.close()
    },
    goHome () {
      this.$router.push({name: 'tools'})
    },
    updateCheck () {
      this.checkVersion({vm: this.$root}).then((data) => {
        if (data === 'big') {
          this.$refs.cmpMessageBox2 && this.$refs.cmpMessageBox2.show()
        } else if (data === 'equ') {
          this.$toast('当前已是最新版本')
        } else if (data === 'sma') {
          this.$toast('当前为超新版本')
        } else {
          this.$toast('未知错误')
        }
      }).catch((err) => {
        this.$toast(err)
      })
    },
    about () {
      this.$refs.cmpMessageBox1 && this.$refs.cmpMessageBox1.show()
    },
    copyMail () {
      navigator.clipboard.writeText('461399479@qq.com').then(() => {
        this.$toast('已复制')
      })
    },
    goBilibili () {
      shell.openExternal('https://www.bilibili.com/video/BV1Ud4y1n7kX/')
    },
    goAlipan () {
      shell.openExternal('https://www.aliyundrive.com/s/yZWdytqxLsL')
    },
    // 全屏
    fullScreenHandler () {
      let eventType = this.isFullScreen ? 'restore' : 'fullscreen'
      ipcRenderer.send('updateWindowStatus', {eventType, winId: this.winId})
      this.isFullScreenSetter(!this.isFullScreen)
    },
    // 最小化
    minimizeHandler () {
      ipcRenderer.send('updateWindowStatus', {eventType: 'minimize', winId: this.winId})
    },
    // 关闭
    closeHandler () {
      ipcRenderer.send('updateWindowStatus', {eventType: 'close', winId: this.winId})
    }
  },
  mounted () {
    // 初始化数据
    this.winId = remote.getCurrentWebContents().id
    // 监听任务栏关闭
    ipcRenderer.on('close-window-render', this.closeHandler)
  }
}
</script>

<style scoped lang="less">
@import "~@/assets/css/_mixins.less";
@import "~@/assets/css/_color.less";
.btns-list {
  display: inline-block;
  color: #666;
  -webkit-app-region: no-drag;
  .btn-item {
    display: inline-block;
    width: 30px;
    height: 40px;
    line-height: 40px;
    margin-left: 5px;
    cursor: pointer;
    text-align: center;
    .fa {
      font-size: 20px;
      line-height: inherit;
    }
  }
}
.headbar {
  height: 60px;
  padding: 10px 15px;
  display: flex;
  align-items: center;
  user-select: none;
  &.draggable {
    -webkit-app-region: drag;
  }
  .left {
    -webkit-app-region: no-drag;
    margin-right: .5em;
    img {
      display: inline-block;
      height: 40px;
      vertical-align: bottom;
    }
    .logo-label {
      margin-left: .5em;
      display: inline-block;
      vertical-align: text-top;
      .title {
        height: 24px;
        line-height: 24px;
        font-size: 18px;
      }
      .version {
        height: 16px;
        line-height: 16px;
        font-size: 12px;
        color: @colorGrey;
      }
    }
  }
  .middle {
    flex-grow: 1;
  }
  .right {
    .btns-list {
      font-weight: 100;
      // color: @colorPrimary;
    }
  }
}
.cmp-message-box {
  .msgbox-body-content {
    height: 100%;
  }
  .msgbox-body-content1 {
    padding: 1em;
    p {text-indent: 2em;}
    .uc-item {line-height: 1.5;text-indent: 2em;color: #666;}
    .btn-link {padding: 0 .25em; text-indent: 0;}
  }
}
</style>
